<template>
  <div id="shop-item">
    <NavBar>
      <div slot="center">购物车({{ cartLength }})</div>
    </NavBar>

    <div class="cart-list" v-for="cart in cartList" :key="cart.id">
      <!-- 复选框 -->
      <div class="item-selector">
        <input
          type="checkbox"
          :checked="cart.checked"
          @change="handecartChange(cart, $event)"
        />
      </div>
      <!-- 商品图片 -->
      <div class="item-img">
        <img v-lazy="cart.image" alt="商品图片" />
      </div>
      <div class="item-info">
        <div class="item-title">
          {{ cart.title }}
          <div class="item-desc">{{ cart.desc }}</div>
        </div>

        <div class="info-bottom">
          <div class="item-price">¥{{ cart.price }}</div>
          <div class="cart_num_tool">
            <a href="javascript:;" class="mins" @click="handleEdit(cart, '-')"
              >-</a
            >
            <div class="input">x{{ cart.num }}</div>
            <a href="javascript:;" class="plus" @click="handleEdit(cart, '+')"
              >+</a
            >
          </div>
        </div>
      </div>
    </div>

    <div class="footer_tool">
      <!-- 总价格 -->
      <div class="check_wrap">
        <input
          class="all_chk_wrap"
          type="checkbox"
          v-model="allChecked"
          @click="allClick"
        />
        <span>全选</span>
        <span v-if="allChecked" @click="deleteAll"> 删除</span>
      </div>
      <div class="total_price_wrap">
        <div class="total_price">
          <span>合计:</span>
          <span class="total_price_text">￥{{ totalPrice }}</span>
        </div>
        <p>包含运费</p>
      </div>

      <!-- 结算 -->
      <div class="order_pay" @click="calcClick">结算({{ totalNum }})</div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "CartIndex",

  data() {
    return {
      storagecartList: [],
    };
  },

  mounted() {
    // this.setCart(this.cartList)
    this.storagecartList = JSON.parse(sessionStorage.getItem("cart")) || [];
  },
  computed: {
    ...mapState(["cartList"]),
    ...mapGetters(["cartLength"]),
    allChecked: {
      //遍历数组里面原理，只要全部元素isChecked属性都为1===>真 true
      //只要有一个不是1======>假false
      get() {
        return (
          this.cartLength > 0 && this.cartList.every((item) => item.checked)
        );
      },

      set(isCheck) {
        this.cartList.forEach((v) => {
          v.checked = isCheck;
        });
      },
    },
    totalNum() {
      // let num = 0;
      // this.cartList.forEach((v) => {
      //   if (v.checked) {
      //     num += v.num;
      //   }
      // });
      // return num;
      return this.cartList
        .filter((item) => item.checked)
        .reduce((prev, current) => {
          return prev + current.num;
        }, 0);
    },

    totalPrice() {
      let sum = 0;
      this.cartList.forEach((v) => {
        if (v.checked) {
          sum += v.price * v.num;
        }
      });

      return sum;
    },
  },
  methods: {
    allClick() {
      this.$store.commit("CHANGEALL", this.allChecked);
    },
    // setCart(cart) {
    //   let allChecked = true;
    //   // 1 总价格 总数量

    //   // 1 总价格 总数量
    //   let totalPrice = 0;
    //   let totalNum = 0;
    //   cart.forEach((v) => {
    //     if (v.checked) {
    //       totalPrice += v.num * v.goods_price;
    //       totalNum += v.num;
    //     } else {
    //       allChecked = false;
    //     }
    //   });
    //   this.totalPrice = totalPrice;
    //   this.totalNum = totalNum;
    //   this.allChecked = allChecked;
    //   this.cartList = cart;

    //   sessionStorage.setcart("cart", JSON.stringify(cart));
    // },
    handecartChange(cart) {
      console.log(cart.checked);
      // cart.checked = !cart.checked;
      this.$store.dispatch("changecartcheck", cart);
    },

    // updateAllCartChecked() {
    //   this.allChecked = !this.allChecked;
    //   // this.cartList.map((cart) => {
    //   //   return (cart.checked = this.allChecked);
    //   // });
    //   // this.cartList.forEach(v => v.checked = this.allChecked);

    //   // 3 循环修改cart数组 中的商品选中状态
    // },
    deleteAll() {
      this.$confirm(`你确定删除所有商品?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$store.commit("DELETEALL");
      });
    },

    handleEdit(cart, type) {
      if (type === "-") {
        // 4.1 弹窗提示 &&
        if (cart.num == 1) {
          //  this.$message.warning('商品至少保留一件');

          this.$confirm(`你确定删除${cart.title}?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.$store.dispatch("handledeleteProduct", cart);
          });
          return;
        }
        this.$store.dispatch("deleteNum", cart);
      } else {
        this.$store.dispatch("addNum", cart);
      }
    },
    calcClick() {
      if (!this.allChecked) {
        this.$toast.Show("请选择购买的商品", 2000);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.cart-list {
  width: 100%;
  display: flex;
  font-size: 0;
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

.item-selector {
  width: 20px;
  display: flex;
  align-items: center;
}

.item-title,
.item-desc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item-img {
  padding: 5px;
  /*border: 1px solid #ccc;*/
}

.item-img img {
  width: 80px;
  height: 100px;
  display: block;
  border-radius: 5px;
}

.item-info {
  font-size: 17px;
  color: #333;
  padding: 5px 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-desc {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.info-bottom {
  display: flex;
  justify-content: space-between;
}

.info-bottom .item-price {
  color: orangered;
}
.cart_num_tool {
  display: flex;
  .mins {
    border: 1px solid #ddd;
    border-right: 0;

    color: #666;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
  }

  .input {
    border: 1px solid #ddd;
    width: 25px;
    height: 25px;

    text-align: center;
    font-size: 14px;
  }

  .plus {
    border: 1px solid #ddd;
    border-left: 0;

    color: #666;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
  }
}
.footer_tool {
  position: fixed;
  bottom: 49px;
  left: 0;
  width: 100%;
  height: 45px;

  background-color: #fff;
  display: flex;
  border-top: 1px solid #ccc;
  .check_wrap {
    flex: 2;
    line-height: 45px;
  }

  .total_price_wrap {
    flex: 4;
    padding-right: 15px;
    text-align: right;

    .total_price_text {
      color: var(--color-tint);

      font-weight: 600;
    }
  }

  .order_pay {
    line-height: 45px;
    flex: 3;
    text-align: center;
    background-color: var(--color-tint);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
  }
}
input {
  background: url(~assets/img/cart/tick.svg);
}
</style>
